<script setup lang="ts">
import { $t } from '@/locales';
import TodoListA from "@/views/home/modules/todolist-a.vue";
import TodoListD from "@/views/home/modules/todolist-d.vue";
import TodoListC from "@/views/home/modules/todolist-c.vue";
import TodoListB from "@/views/home/modules/todolist-b.vue";
import TodoListE from "@/views/home/modules/todolist-e.vue";
defineOptions({
  name: 'TodoList'
});
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper h-full">
    <div class="h-full">
      <n-tabs type="line" size="medium" tab-style="font-size: 16px" :bar-width="100">
        <n-tab-pane name="a" tab="待办(0)">
          <TodoListA/>
        </n-tab-pane>
        <n-tab-pane name="b" tab="已办">
          <TodoListB/>
        </n-tab-pane>
        <n-tab-pane name="c" tab="完成">
          <TodoListC/>
        </n-tab-pane>
        <n-tab-pane name="d" tab="抄送">
          <TodoListD/>
        </n-tab-pane>
        <n-tab-pane name="e" tab="超时(0)">
          <TodoListE/>
        </n-tab-pane>
        <template #suffix>
          <icon-material-symbols-lists/>
        </template>
      </n-tabs>
    </div>
  </NCard>
</template>

<style scoped>
:deep(.n-card__content) {
 padding-top: 2px !important;
}
:deep(.n-tabs-tab--active){
  font-weight: 600 !important;
}
:deep(.n-tabs-tab__label){
  width: 60px;
  flex-direction: column;
}
:deep(.n-list-item__suffix ){
  flex: none !important;
}
:deep(.n-list-item__prefix){
  flex: none !important;
}
:deep(.n-list-item){
  padding: 12px 12px !important;
}

</style>
